<template>
  <el-dialog title="修改密码" width="40%">
    <div class="demo-register">
      <Login ref="form" @on-submit="handleSubmit">
        <Email name="mail" />
        <Poptip trigger="focus" placement="right">
          <Password name="password" style="width: 400px;" :rules="passwordRule" placeholder="至少6位密码，区分大小写"
            @on-change="handleChangePassword" />
          <template #content>
            <div class="demo-register-tip">
              <div class="demo-register-tip-title" :class="passwordTip.class">
                强度：{{ passwordTip.strong }}
              </div>
              <Progress :percent="passwordTip.percent" hide-info :stroke-width="6" :stroke-color="passwordTip.color" />
              <div class="demo-register-tip-desc">
                请至少输入 6 个字符。请不要使用容易被猜到的密码。
              </div>
            </div>
          </template>
        </Poptip>
        <div class="emo-login">
          <!-- 验证码 -->
          <Captcha name="captcha" :field="['mail']" @on-get-captcha="handleGetCaptcha" />
        </div>
        <Submit>确认修改</Submit>
      </Login>

      <div class="bottom">
        <GlobalFooter :links="links" :copyright="copyright" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import userCount from '../../stores/userCount'
export default {

  data() {
    return {
      passwordRule: [
        {
          required: true, message: '密码不能为空！', trigger: 'change'
        },
        {
          min: 6, message: '密码不能少于6位！', trigger: 'change'
        }
      ],
      passwordConfirmRule: [
        {
          required: true, message: '确认密码不能为空！', trigger: 'change'
        },

      ],
      // 密码长度，在密码强度提示时作为判断依据
      passwordLen: 0,
      code: '',
      user: userCount(),

    }
  },
  computed: {
    // 密码强度提示文案等
    passwordTip() {
      let strong = '强';
      let className = 'strong';
      let percent = this.passwordLen > 10 ? 10 : this.passwordLen;
      let color = '#19be6b';

      if (this.passwordLen < 6) {
        strong = '太短';
        className = 'low';
        color = '#ed4014';
      } else if (this.passwordLen < 10) {
        strong = '中';
        className = 'medium';
        color = '#ff9900';
      }
      return {
        strong,
        class: 'demo-register-tip-' + this.passwordLen < 6 ? 'low' : (this.passwordLen < 10 ? 'medium' : 'strong'),
        percent: percent * 10,
        color,
      }
    }
  },
  methods: {
    handleChangePassword(val) {
      this.passwordLen = val.length;
    },
    /* 发送邮件 */
    handleGetCaptcha(valid, { mail }) {
      axios.post('http://8.130.43.203:8080/user/email/', { "email": mail }).then(resp => {
        this.code = resp.data
      })
    },
    /* 修改密码 */
    handleSubmit(valid, { mail, password, captcha }) {
      if (valid) {
        if (password != this.user.userInfo.pwd) {
          if (this.code == captcha) {
            axios.put('http://8.130.43.203:8080/user/pwd', { "email": mail, "pwd": password }).then(resp => {
              ElMessage({
                message: '修改成功，即将跳转到登陆页面',
                type: 'success',
                duration: 2000
              })
              setTimeout(() => {
                this.$router.push('/login')
              }, 2000);
            })
          } else {
            ElMessage.error('验证码错误，请重新输入')
          }
        } else {
          ElMessage.error('密码未作修改！')
        }

      }
    },
  }
}
</script>

<style scoped>
.demo-register {
  width: 400px;
  margin: 0 auto !important;
}
</style>
